<template>
  <!-- 生产管理视图 -->
  <div class="space-y-6">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
      <h2 class="text-2xl font-bold">生产管理</h2>
      <div class="flex space-x-3 mt-4 md:mt-0">
        <div class="relative">
          <input
            type="text"
            v-model="searchQuery"
            placeholder="搜索生产工单..."
            class="pl-9 pr-4 py-2 rounded-lg border border-light-1 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200"
          />
          <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-3"></i>
        </div>
        <button
          @click="createWorkOrder"
          class="bg-primary text-white px-4 py-2 rounded-lg font-medium hover:bg-primary/90 transition-colors duration-200 shadow-md hover:shadow-lg flex items-center"
        >
          <i class="fa-solid fa-plus mr-2"></i>创建工单
        </button>
      </div>
    </div>

    <!-- 生产状态卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-white rounded-xl p-5 shadow-card">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-dark-2 font-medium">今日生产计划</h3>
          <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-5xl">
            <i class="fa-solid fa-calendar-check"></i>
          </div>
        </div>
        <div class="text-3xl font-bold mb-2">{{ productionPlan.total }}</div>
        <div class="text-dark-3 text-sm">已完成: {{ productionPlan.completed }} / {{ productionPlan.total }}</div>
        <div class="mt-3 h-2 bg-blend-lighten rounded-full overflow-hidden">
          <div class="h-full bg-primary rounded-full" style="width: 78%"></div>
        </div>
      </div>

      <div class="bg-white rounded-xl p-5 shadow-card">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-dark-2 font-medium">生产效率</h3>
          <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success">
            <i class="fa-solid fa-tachometer-alt"></i>
          </div>
        </div>
        <div class="text-3xl font-bold mb-2">{{ productionEfficiency.value }}%</div>
        <div
          :class="{ 'text-success': productionEfficiency.trend > 0, 'text-danger': productionEfficiency.trend < 0 }"
          class="text-sm flex items-center"
        >
          <i
            :class="{ 'fa-arrow-up': productionEfficiency.trend > 0, 'fa-arrow-down': productionEfficiency.trend < 0 }"
            class="fa-solid mr-1"
          ></i>
          {{ Math.abs(productionEfficiency.trend) }}% <span class="text-dark-3 ml-1">较昨日</span>
        </div>
        <div class="mt-3 h-2 bg-light-2 rounded-full overflow-hidden">
          <div class="h-full bg-success rounded-full" :style="{ width: productionEfficiency.value + '%' }"></div>
        </div>
      </div>

      <div class="bg-white rounded-xl p-5 shadow-card">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-dark-2 font-medium">质量合格率</h3>
          <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning">
            <i class="fa-solid fa-check-circle"></i>
          </div>
        </div>
        <div class="text-3xl font-bold mb-2">{{ qualityRate.value }}%</div>
        <div
          :class="{ 'text-success': qualityRate.trend > 0, 'text-danger': qualityRate.trend < 0 }"
          class="text-sm flex items-center"
        >
          <i :class="{ 'fa-arrow-up': qualityRate.trend > 0, 'fa-arrow-down': qualityRate.trend < 0 }" class="fa-solid mr-1"></i>
          {{ Math.abs(qualityRate.trend) }}% <span class="text-dark-3 ml-1">较昨日</span>
        </div>
        <div class="mt-3 h-2 bg-light-2 rounded-full overflow-hidden">
          <div class="h-full bg-warning rounded-full" :style="{ width: qualityRate.value + '%' }"></div>
        </div>
      </div>
    </div>

    <!-- 生产工单表格 -->
    <div class="bg-white rounded-xl shadow-card overflow-hidden">
      <div class="p-5 border-b border-light-1 flex items-center justify-between">
        <h3 class="font-bold text-lg">生产工单列表</h3>
        <div class="flex space-x-2">
          <button
            v-for="status in workOrderStatuses"
            :key="status.value"
            :class="{
              'px-3 py-1 text-xs rounded-lg': true,
              'bg-primary text-white': activeStatus === status.value,
              'text-dark-2 hover:bg-light-1': activeStatus !== status.value
            }"
            @click="activeStatus = status.value"
          >
            {{ status.label }}
          </button>
        </div>
      </div>
      <div class="table-box">
        <ProTable ref="proTable" title="菜单列表" row-key="path" :indent="20" :columns="columns" :data="menuData">
          <!--          &lt;!&ndash; 表格 header 按钮 &ndash;&gt;
          <template #tableHeader>
            <el-button type="primary" :icon="CirclePlus">新增菜单 </el-button>
          </template>-->
          <!-- 菜单图标 -->
          <!--          <template #icon="scope">
            <el-icon :size="18">
              <component :is="scope.row.meta.icon"></component>
            </el-icon>
          </template>-->
          <!-- 菜单操作 -->
          <template #operation>
            <el-button type="primary" link :icon="EditPen"> 编辑 </el-button>
            <el-button type="primary" link :icon="Delete"> 删除 </el-button>
          </template>
        </ProTable>
      </div>
      <div class="p-5 border-t border-light-1 flex items-center justify-between">
        <div class="text-sm text-dark-3">
          显示 {{ pagination.currentPage * pagination.pageSize - pagination.pageSize + 1 }} 到
          {{ Math.min(pagination.currentPage * pagination.pageSize, filteredWorkOrders.length) }} 条，共
          {{ filteredWorkOrders.length }} 条
        </div>
        <div class="flex space-x-1">
          <button
            @click="prevPage"
            class="w-8 h-8 flex items-center justify-center rounded-lg border border-light-1 text-dark-3 hover:bg-light-1"
            :disabled="pagination.currentPage <= 1"
          >
            <i class="fa-solid fa-angle-left"></i>
          </button>
          <button
            v-for="page in totalPages"
            :key="page"
            :class="{
              'w-8 h-8 flex items-center justify-center rounded-lg': true,
              'bg-primary text-white': page === pagination.currentPage,
              'border border-light-1 hover:bg-light-1': page !== pagination.currentPage
            }"
            @click="pagination.currentPage = page"
          >
            {{ page }}
          </button>
          <button
            @click="nextPage"
            class="w-8 h-8 flex items-center justify-center rounded-lg border border-light-1 text-dark-3 hover:bg-light-1"
            :disabled="pagination.currentPage >= totalPages"
          >
            <i class="fa-solid fa-angle-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { Delete, EditPen } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import authMenuList from "@/assets/json/authMenuList.json";
import { ColumnProps } from "@/components/ProTable/interface";

// 状态管理
const searchQuery = ref("");
const activeStatus = ref("all");
const pagination = ref({
  currentPage: 1,
  pageSize: 3
});

// 模拟数据
const productionPlan = ref({
  total: 12,
  completed: 8,
  percentage: 66.67
});

const productionEfficiency = ref({
  value: 92,
  trend: 4
});

const qualityRate = ref({
  value: 98.5,
  trend: -1.2
});

const workOrders = ref([
  {
    id: 1,
    code: "PO-20250526-001",
    productName: "智能手表 X2",
    planQuantity: 500,
    completedQuantity: 320,
    percentage: 64,
    leader: {
      name: "张三",
      avatar: "https://picsum.photos/id/1012/32/32"
    },
    startDate: "2025-05-26",
    status: "inProgress"
  }
  // {
  //   id: 2,
  //   code: "PO-20250525-002",
  //   productName: '蓝牙耳机 Pro',
  //   planQuantity: 1000,
  //   completedQuantity: 1000,
  //   percentage: 100,
  //   leader: {
  //     name: '李四',
  //     avatar: 'https://picsum.photos/id/1027/32/32'
  //   },
  //   startDate: '2025-05-25',
  //   status: 'completed'
  // },
  // {
  //   id: 3,
  //   code: 'PO-20250524-003',
  //   productName: '智能手环 Z5',
  //   planQuantity: 800,
  //   completedQuantity: 0,
  //   percentage: 0,
  //   leader: {
  //     name: '王五',
  //     avatar: 'https://picsum.photos/id/1025/32/32'
  //   },
  //   startDate: '2025-05-24',
  //   status: 'planned'
  // }
]);

// 状态选项
const workOrderStatuses = ref([
  { value: "all", label: "全部" }
  /*  { value: 'inProgress', label: '进行中' },
  { value: 'completed', label: '已完成' },
  { value: 'paused', label: '已暂停' },
  { value: 'planned', label: '计划中' }*/
]);
const proTable = ref();

const menuData = ref(authMenuList.data);

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "meta.title", label: "菜单名称", align: "left" },
  { prop: "meta.icon", label: "菜单图标" },
  { prop: "name", label: "菜单 name" },
  { prop: "path", label: "菜单路径", width: 300 },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
// 计算属性
const filteredWorkOrders = computed(() => {
  let result = [...workOrders.value];

  // 按状态过滤
  if (activeStatus.value !== "all") {
    result = result.filter(order => order.status === activeStatus.value);
  }

  // 按搜索词过滤
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase().trim();
    result = result.filter(
      order =>
        order.code.toLowerCase().includes(query) ||
        order.productName.toLowerCase().includes(query) ||
        order.leader.name.toLowerCase().includes(query)
    );
  }

  return result;
});

/*
const paginatedWorkOrders = computed(() => {
  const start = (pagination.value.currentPage - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return filteredWorkOrders.value.slice(start, end)
});
*/

const totalPages = computed(() => {
  return Math.ceil(filteredWorkOrders.value.length / pagination.value.pageSize);
});

/*// 工具方法
const getStatusClass = (status: string) => {
  const statusClasses = {
    inProgress: "bg-warning/10 text-warning",
    completed: "bg-success/10 text-success",
    planned: "bg-primary/10 text-primary",
    paused: "bg-danger/10 text-danger"
  };
  return statusClasses[status] || "bg-light-1 text-dark-3";
};

const getStatusLabel = (status: string) => {
  const statusLabels = {
    inProgress: "进行中",
    completed: "已完成",
    planned: "计划中",
    paused: "已暂停"
  };
  return statusLabels[status] || "未知";
};

const getProgressColor = (percentage: number) => {
  if (percentage === 100) return "bg-success";
  if (percentage === 0) return "bg-dark-3";
  return "bg-primary";
};*/

// 方法
const createWorkOrder = () => {
  console.log("创建工单");
  // 这里应该有创建工单的逻辑
};

/*const viewOrderDetails = (id: number) => {
  console.log("查看工单详情:", id);
  // 这里应该有查看工单详情的逻辑
};

const editOrder = (id: number) => {
  console.log("编辑工单:", id);
  // 这里应该有编辑工单的逻辑
};*/

const prevPage = () => {
  if (pagination.value.currentPage > 1) {
    pagination.value.currentPage--;
  }
};

const nextPage = () => {
  if (pagination.value.currentPage < totalPages.value) {
    pagination.value.currentPage++;
  }
};

// 生命周期钩子
onMounted(() => {
  // 模拟数据加载
  console.log("组件已挂载，加载数据...");
});
</script>
<style>
.bg-primary\/10 {
  background-color: rgb(22 93 255 / 10%);
}
</style>
